import ReactDOM from 'react-dom/client'
/*
    回顾：vue列表渲染
    react中使用数组中的map方法来实现列表渲染
    语法:ary.map((item,index)=>{
        return 返回值
    })
*/
const students=[
    {
        id:'1001',
        name:'张资源',
        age:24,
        gender:1,
        telephone:'13324567899',
        addresss:'山西省西安市凤城一路1号'
    },
    {
        id:'1002',
        name:'刘畅',
        age:23,
        gender:1,
        telephone:'13324567892',
        addresss:'山西省西安市凤城一路2号'
    },
    {
        id:'1003',
        name:'李敏',
        age:21,
        gender:0,
        telephone:'13324567892',
        addresss:'山西省西安市凤城一路3号'
    }
]
const Gphone=mobile=>`+86${mobile}`
const template=(<>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>电话</th>
                <th>地址</th>
            </tr>
        </thead>
        <tbody>
            {
              students.map((item,index)=>{
                return <tr key={item.id}>
                    <td>{index+1}</td>
                    <td>{item.name}</td>
                    <td>{item.age}</td>
                    <td>{item.gender==1?'男':'女'}</td>
                    <td>{Gphone(item.telephone)}</td>
                    <td>{item.addresss}</td>
                </tr>
              })  
            }
        </tbody>
    </table>
</>)
const root=ReactDOM.createRoot(document.querySelector('#root'))
root.render(template)